<template>
  <!-- 表情选择器容器 -->
  <div class="emoji">
    <!-- 最近使用的表情列表，根据条件判断是否显示 -->
    <div v-if="emoji.historyList?.length">
      <p>最近使用</p>
      <!-- 展示最近使用表情的列表，根据表情历史列表长度动态控制类名 -->
      <ul class="history" :class="emoji.historyList?.length ? 'historyShow' : ''">
        <!-- 遍历表情历史列表，去除重复项后渲染每个表情，点击表情触发emojiHandle方法来处理点击事件，使用v-html渲染表情内容 -->
        <li v-for="(item, index) in [...new Set(emoji.historyList)]" :key="index" @click.stop="emojiHandle(item)"
          v-html="item"></li>
      </ul>
    </div>
    <!-- 表情显示区域 -->
    <div class="emojis">
      <!-- 根据当前激活的Tab循环展示不同分类的表情，这里是遍历表情对象 -->
      <div v-for="(value, key, index) in emojiObj" :key="key">
        <!-- 仅显示当前激活Tab对应的表情分类 -->
        <div v-if="activeTab === index">
          <ul class="default">
            <!-- 循环渲染每个表情，点击表情触发emojiHandle方法来处理点击事件，使用v-html渲染表情内容 -->
            <li v-for="(item, itemIndex) in value.value" :key="itemIndex" @click.stop="emojiHandle(item)" v-html="item">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- Tab 切换区域 -->
    <div class="tabs">
      <!-- 循环渲染每个表情分类的Tab，根据索引判断是否为当前激活状态，点击Tab可切换激活的表情分类 -->
      <p v-for="(item, index) in Object.keys(emojiObj)" :key="item" :class="{ active: activeTab === index }"
        @click="activeTab = index">
        {{ emojiObj[item].name }}
      </p>
    </div>


  </div>
</template>
<script lang="ts" setup>
// 引入Vue相关的响应式和事件相关的函数和类型定义
import { ref, reactive, defineEmits } from "vue";
// 引入获取所有类型表情数据的函数（具体实现应该在'./utils'文件中）
import { getAllTypeEmojis } from './utils';

// 定义表情类型的接口，用于描述表情对象的结构，包含名称和对应表情值数组的键值对形式
interface EmojiType {
  [name: string]: { name: string; value: string[] };
}

// 定义emit函数用于向父组件发送名为'emojiHandle'的自定义事件
const emit = defineEmits(["emojiHandle"]);

// 定义props接收父组件传递的属性，这里有一个布尔类型的'all'属性，默认值为false
const props = defineProps({
  all: {
    type: Boolean,
    default: false
  }
});

// 获取所有类型的表情数据，具体返回的数据结构应符合EmojiType接口定义
const res = getAllTypeEmojis();
// 定义响应式变量emojiObj，用于存储表情对象，初始为空对象，类型为EmojiType
const emojiObj = ref<EmojiType>({});

// 根据传入的'all'属性值来决定emojiObj存储的表情数据内容
// 如果'all'为true，则存储所有获取到的表情数据（res）
// 如果'all'为false，则只存储默认表情数据（res.defEmojis，这里假设res对象有这个属性结构）
if (props.all) {
  emojiObj.value = res;
} else {
  emojiObj.value = {
    defEmojis: res.defEmojis
  };
}

// 定义响应式对象emoji，用于存储表情选择相关的状态信息，如选择的表情项、表情历史列表、所有表情对象等
const emoji = reactive({
  chooseItem: "",
  historyList: [],
  allEmoji: emojiObj.value,
});
// 打印当前emojiObj的值，可能用于调试查看获取到的表情数据情况
console.log(emojiObj.value);
// 定义响应式变量activeTab，用于存储当前激活的Tab索引，初始值为0，表示第一个Tab是默认激活状态
const activeTab = ref(0);

// 点击表情的事件处理函数，接收一个表情字符串作为参数
const emojiHandle = (item: string) => {
  // 将当前点击的表情赋值给选择的表情项
  emoji.chooseItem = item;
  // 将点击的表情添加到表情历史列表的开头，实现最近使用靠前显示
  emoji.historyList.unshift(item);
  // 触发自定义事件'emojiHandle'，并将当前点击的表情作为参数传递给父组件
  emit("emojiHandle", item);
};
</script>
<style lang="less" scoped>
/* 隐藏历史表情列表和默认表情列表的滚动条 */
.history::-webkit-scrollbar,
.default::-webkit-scrollbar {
  display: none;
}

/* 表情选择器整体样式相关设置 */
.emoji {
  position: absolute;
  min-width: 3.5rem;
  height: rem;
  top: 4.3rem;
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0.04rem;
  padding: 0.04rem;
  overflow: scroll;
  height: 33vh;

  p {
    font-size: 0.12rem;
    padding: 0.01rem;
    cursor: pointer;
  }

  .tabs {
    display: flex;
    position: absolute;
    bottom: 0;

    p {
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 100%;
      background-color: #fff;
      width: 0.41rem;
      height: 0.3rem;
      border-bottom: 2px solid transparent;

      // 当Tab处于激活状态时，设置底部边框颜色，用于突出显示当前激活的Tab
      &.active {
        border-bottom-color: #0084ff;
      }
    }
  }

  .history,
  .default {
    width: 100%;
    height: 25vh;
    overflow-y: auto;

    li {
      display: inline-block;
      padding: 0.5vh;
      font-size: 26px;
      width: 32px;
      height: 32px;
      line-height: 1;
      overflow: hidden;
      cursor: pointer;
    }

    li:hover {
      background-color: #ececec;
    }
  }

  .history {
    height: 0;
    width: 100%;
    position: relative;
    transition: all 2.5s;
  }

  .historyShow {
    height: 0.4rem;
  }
}

/* 响应式样式，当屏幕宽度小于等于800px时，设置表情选择器宽度为80vw，实现自适应布局 */
@media screen and (max-width: 800px) {
  .emoji {
    width: 80vw;
  }
}
</style>